<template>
  <transition name="slide">
    <div class="container">
      <div class="box">
       <header class="header">
        <div class="header-button isleft">
            <router-link to="/my/nologin" tag="label" >
              <span class="iconfont icon-fanhui"></span>
            </router-link>
        </div>
        <h1 class="header-title">注册</h1>
        <div class="header-button"></div>
      </header>
        <div class="register-header">
      		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544356240863&di=d8bab9fc1993919bc41339217b2733de&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F810a19d8bc3eb1359b3f7996ad1ea8d3fd1f4427.jpg"/>
    		</div>
        <div class="content">
            <mt-field  placeholder="请输入邮箱号" :state="usernameState" v-model="email"></mt-field>
            <mt-field placeholder="验证码" v-model="code" >
              <span @click="sendCode">{{ tip }}</span>
            </mt-field>
            <mt-button :disabled="disabled" @click.native="register" :type="type" size="large">注册</mt-button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import Vue from 'vue'
import { Field, Button, Toast } from 'mint-ui'
Vue.use(Field, Button)
export default {
	data () {
    return {
      email: '',
      password: '',
      code: '',
      tip: '发送验证码',
      timer: null,
      flag: 'yes' // 发送短信验证码是否可点  默认可点  不可点为no
    }
 },
 computed: {
    type () {
      if (this.usernameState === 'success') {
        // this.disabled = false
        return 'primary'
      } else {
        // this.disabled = true
        return 'default'
      }
    },
    disabled () {
      if (this.type === 'primary') {
        return false
      } else {
        return true
      }
    },
    usernameState () {
      if (this.email === '') {
        return ''
      }
      if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.email)) {
        return 'success'
      } else {
        return 'error'
      }
    }
  },
  methods: {
    sendCode () {
      if (this.flag === 'yes') {
        let time = 20
        this.timer = setInterval(() => {
          this.flag = 'no'
          this.tip = `${time}s后继续发送`
          time--
          if (time === -1) {
            this.tip = '发送验证码'
            this.flag = 'yes'
            clearInterval(this.timer)    
          }
        }, 1000)
		    fetch(`/daxun/code?email=${this.email}`,{
		    	method: 'POST',
	        headers: {
	          'Accept': 'application/json',
	          'Content-Type': 'application/json'
	        },
	        body: JSON.stringify({
	          email: this.email,
	        })  
		    }).then(res => res.json())
		      .then(data => {
		        console.log(data)
		        if (data.code === 1000) {
		        	Toast('发送成功')
		      	}else if (data.code === 1001) {
		        	Toast('验证码失效')
		      	}else{
		      	
		      	}
		  		})
		  }
    },
    register () {
      fetch(`/daxun/codeLogin?email=${this.email}&code=${this.code}`, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          email: this.email,
          code: this.code
        })
      }).then(res => res.json())
        .then(data => {
          console.log(data)
					if(data.code===1000){
						console.log(data)
						sessionStorage.setItem('tokenKey',data.other)
						this.$router.replace('/recommend')
					}
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.register-header{
	@include rect(100%, 2.3rem);
	@include flexbox();
	@include align-items(); 
  justify-content:center;
  img{
  	@include rect(50%, 2rem);
  }
}
</style>
